<template>
  <div id="container">
      <el-header id="my_header">
        <el-row id="my_row">
          <el-col :span="12">
            <img src="./assets/拍卖.png" alt="LOGO" style="width: 50px;">
          </el-col>
          <el-col :span="5" class="header_right"></el-col>
          <!-- 时间，余额展示 -->
          <el-col :span="5" class="header_right">
            <span class="header_right_item">时间：{{ timeShow }}</span>
            <span class="header_right_item" id="banlance">余额：<span style="color: red;">{{ balance }}</span></span>
          </el-col>
          <el-col :span="2" class="header_right">
            <el-button plain @click="logoutHandle">退出登录</el-button>
          </el-col>
        </el-row>
      </el-header>
      <!-- 内容区 -->
      <div id="content">
        <div id="my_aside" style="margin-top: 5px;">
          <LeftAside/>
        </div>
        <div style="position: relative; width: 100%; margin-top: 2px;" >
          <router-view></router-view>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import { onMounted, ref, inject } from "vue";
import axios from 'axios';
import LeftAside from "./components/LeftAside.vue";
// 导入自定义 用户信息类
import { useUserStore } from './stores/user';
const userStore = useUserStore()
// ==== header信息 ====
//时间和余额
let timeShow = ref<string>("1970-01-01");
let balance = ref<number>(0);

// 通过vue注入获取统一的请求路径前缀
const baseUrl = inject<string>('apiBaseUrl');

// 获取用户信息
async function getUserInfo(): Promise<any> {
  let uuid = window.localStorage.getItem("uid");
  const res = await axios.get(`${baseUrl}/users/${uuid}`);
  // 将用户信息存入pinia
  userStore.setUserInfo(res.data.data);
  balance.value = userStore.userInfo.balance;
}

// 检查登录
function checkLogin(){
  if(window.localStorage.getItem("uid") == undefined){
    window.location.href = "/login/"
  }
}

// 退出登录
function logoutHandle(){
  window.localStorage.removeItem('uid');
  window.location.href ="/login/"
}

onMounted(() => {
  // 检查登录，未登录跳转到登录页面
  checkLogin()

  // 给右上角添加时间
  timeShow.value = moment(new Date()).format("YYYY-MM-DD");
  // 获取用户信息（暂时，因为登录后会将用户信息存入pinia，此处直接取pinia值就好）
  getUserInfo();
})

// ========


</script>

<style scoped>
#content{
  height: 88vh;
  display: flex;
}

.header_right_item {
  min-width: 150px;
}

#banlance {
  position: relative;
  left: 20px;
}

#my_row {
  /* box-shadow: 0px 0px 5px #906868; */
  border-radius: 8px;
  height: 100%;
}

.header_right {
  line-height: 100%;
  display: flex;
  align-items: center;
}

#my_header {
  /* border: solid red 1px; */
  box-shadow: 0px 0px 2px #020101;
  border-radius: 8px;
  position: relative;
  background: linear-gradient(#fdf3c2, #fbfae6);
}


#my_aside {
  height: 88vh;
  width: 200px;
  box-shadow: 0px 0px 5px #2d2b2b;
  border-radius: 5px;
  position: relative;
}

#my_main {
  /* border: solid rgb(102, 190, 35) 1px; */
}

#myMain{
  /* border: solid red 2px; */
  overflow: hidden;
}
</style>
